<%--
	* Copyright: coolmoon Software Design Co,.ltd
	* Created on 2013-5-30-下午05:05:56
	* @author lenovo
	* JSP页面功能描述: 
	
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="security"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>聊天室</title>
	<script type='text/javascript' src='${pageContext.request.contextPath}/dwr/engine.js'></script>
	<script type='text/javascript' src='${pageContext.request.contextPath}/dwr/interface/Chat.js'></script>
	<!-- script代码 -->
	<script type="text/javascript">
	<!--
		var userName = "<security:authentication property='principal.realName' />";
		$(document).ready(function(){
			dwr.engine.setActiveReverseAjax(true);
		});
		// 发送聊天信息
		function sendMessage()
		{
			var value = $("#msg").val();
			if (value.length > 0) 
			{
				Chat.addMessage(value, userName, function() 
				{
					$("#msg").val('');
				});
			}
			$("#msg").focus();
		}
		// 接受消息
		function receiveMessages(msgObj) {
			var chatlog = $('#chatlog');
			var message = '<div style="margin-top:5px;"><font color="green">'+msgObj.sender+'  </font>'+msgObj.date.format("hh:mm:ss")+' </div><div style="margin-top:5px;">'+msgObj.text+'</div>';
			chatlog.append(message);
			var scrollTop = chatlog[0].scrollHeight;  
			chatlog.scrollTop(scrollTop);
		}
	//-->
	</script>
</head>
<body>

<%--正文开始--%>
	<div id="chatRoomDiv" style="width: 700px;height: 505px;left: 25%;position: absolute;border: 1px solid blue;">
		<div id="userName" style="height:20px;border-bottom: 1px solid blue;"><security:authentication property="principal.realName" /></div>
		<div style="height: 400px;">
			<div id="chatlog" style="width: 500px;height: 400px;border-right: 1px solid blue;border-bottom: 1px solid blue;float: left;overflow-y: auto;"></div>
			<div id="users" style="width: 197px;height: 400px;border-bottom: 1px solid blue;float: right;">
				<ul>
					<li userName="admin">管理员</li>
					<li userName="doc">文档管理员</li>
					<li userName="lixiaokui">李晓奎</li>
					<li userName="liubing">刘冰</li>
				</ul>
			</div>
		</div>
		<div style="height: 77px;vertical-align: middle;">
			<textarea id="msg" style="width: 495px;height: 77px;border: none;"></textarea>
			<input type="button" value="发送" onclick="sendMessage();"/>
		</div>
	</div>
<%--正文结束--%>

</body>
</html>